<template>
  <div>
    <el-card shadow="false" class="box-card1">
      <div slot="header" class="clearfix">
        <span>分类管理</span>
      </div>
      <div class="text item">
        <el-card style="border: 1px solid #fff" shadow="false" class="box-card">
          <div slot="header" class="clearfix">
            <span>乐居分类:</span>
          </div>
          <div class="lejusort text item">
            <el-card
              v-for="item in lejuData"
              :key="item.id"
              shadow="hover"
              class="box-card"
            >
              <div slot="header" class="clearfix">
                <span>{{ item.name }}</span>
              </div>
              <div class="text item">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:9528/lejuAdmin/material/uploadFileOss"
                  :show-file-list="false"
                  :headers="headers"
                  :on-success="handleAvatarSuccess"
                  @click.native="whichone(item.id)"
                >
                  <img
                    style="width: 300px; height: 300px"
                    :src="item.icon"
                    class="avatar"
                  />
                </el-upload>
              </div>
            </el-card>
          </div>
        </el-card>
        <el-card style="border: 1px solid #fff" shadow="false" class="box-card">
          <div slot="header" class="clearfix">
            <span>全部分类:</span>
          </div>
          <div class="lejusort text item">
            <el-table
              :data="tableData"
              style="width: 100%; margin-bottom: 20px"
              row-key="id"
              border
              :tree-props="{
                children: 'children',
                hasChildren: 'hasChildren',
              }"
            >
              <el-table-column
                prop="name"
                label="菜单名称"
                align="center"
              ></el-table-column>
              <el-table-column align="center" prop="" label="图片">
                <template slot-scope="scope">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.icon"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="name"
                label="分类名字"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="sort"
                label="排序"
              ></el-table-column>
              <el-table-column
                prop="showStatus"
                label="显示状态"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="name"
                label="导航栏展示"
              ></el-table-column>
              <el-table-column
                prop="description"
                label="描述"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import goodsSortApi from "@/api/goods/goodsSort/index";
import { getToken } from "@/utils/myAuth";
export default {
  components: {},

  data() {
    return {
      lejuData: [],
      tableData: [],
      choiceid: "",
    };
  },

  created() {
    this.init();
  },

  mounted() {},

  methods: {
    // 更新上传乐居的图片
    handleAvatarSuccess(res) {
      console.log(res);
      var index = this.lejuData.findIndex((el) => {
        return el.id == this.choiceid;
      });
      console.log(res);
      if (res.success) {
        this.$confirm("确定更新分类图片么, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.lejuData[index].icon = res.data.fileUrl;
          goodsSortApi
            .updateCategory({
              id: this.choiceid,
              icon: res.data.fileUrl,
            })
            .then((res) => {
              console.log(res);
              if (res.success) {
                this.$message({
                  type: "success",
                  message: "更新成功!",
                });
                this.init();
              } else {
                this.$message.error(res.message);
              }
            });
        });
      } else {
        this.$message.error(res.message);
      }

      console.log(index);
    },
    whichone(id) {
      console.log(id);
      this.choiceid = id;
    },

    init() {
      goodsSortApi.getAllCategory().then((res) => {
        console.log(res);
        this.tableData = res.data.items.map((item) => {
          var obj = item.category;
          obj.children = item.children;
          return obj;
        });
        this.lejuData = res.data.items[1].children;
      });
    },
  },

  computed: {
    headers() {
      const token = getToken();
      return { token };
    },
  },

  watch: {},
};
</script>

<style scoped lang='scss'>
.lejusort {
  display: flex;
  justify-content: space-between;
}
.box-card1 {
  width: 97%;
  margin: 15px auto;
}
</style>